<template>
  <div>
    <!-- 卡片顶部输入框、查询、添加按钮 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="requestParameters.username" placeholder="请输入标签码" clearable />
      </el-form-item>
      <el-form-item>
        <el-select v-model="requestParameters.productStatus" placeholder="请选择产品状态" style="width: 200px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="requestParameters.productModel" placeholder="请输入产品型号" clearable />
      </el-form-item>
      <el-form-item>
        <div class="demo-datetime-picker">
          <div class="block">
            <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="Search">查询</el-button>
        <el-button type="primary" @click="handleDetail" icon="Download">下载</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格组件：用于展示用户信息 -->
    <el-table :data="runLogArr" :header-cell-style="{ background: '#6A9BEB', color: '#fff' }">
      <el-table-column prop="qrCode" label="二维码" align="center"></el-table-column>
      <el-table-column prop="serialNumber1" label="型号" align="center"></el-table-column>
      <el-table-column prop="serialNumber2" label="刚刻号" align="center"></el-table-column>
      <el-table-column prop="productModel" label="产品首字母刚刻号" align="center"></el-table-column>
      <el-table-column prop="testTime" label="更新时间" align="center"></el-table-column>
      <el-table-column prop="totalStatus" label="结果" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="mini" @click="handleDetail(scope.$index, scope.row)" type="warning">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog title="刚度测试详情" v-model="dialogVisible" width="90%">
      <!-- 描述列表 -->
      <el-descriptions :column="4" border style="width: 100%; margin-bottom: 1vh">
        <el-descriptions-item label="产品码" label-class-name="my-label" content-class-name="my-content">{{ form.qrCode }}</el-descriptions-item>
        <el-descriptions-item label="产品型号" label-class-name="my-label">{{ form.serialNumber1 }}</el-descriptions-item>
        <el-descriptions-item label="结果" label-class-name="my-label">{{ form.totalStatus }}</el-descriptions-item>
        <el-descriptions-item label="更新时间" label-class-name="my-label">{{ form.testTime }}</el-descriptions-item>
        <el-descriptions-item label="相位角的实际值" label-class-name="my-label">{{ form.phaseAngle }}</el-descriptions-item>
        <el-descriptions-item label="相位角的标准最小值" label-class-name="my-label">{{ form.phaseAngleMax }}</el-descriptions-item>
        <el-descriptions-item label="相位角的标准最大值" label-class-name="my-label">{{ form.phaseAngleMin }}</el-descriptions-item>
        <el-descriptions-item label="相位角的结果" label-class-name="my-label">{{ form.phaseAngleStatus }}</el-descriptions-item>
      </el-descriptions>
      <p></p>

      <el-row class="stiffnessOne">
        <el-col :span="5">
          <div class="grid">
            <div class="block1">AB Stiffness</div>
            <div class="block">Max</div>
            <div class="block">{{ form.abStiffnessMax }}</div>
            <div class="block">{{ form.abCwStiffness }}</div>
            <div class="block2" :class="form.abResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.abResult }}</div>
            <div class="block">Min</div>
            <div class="block">{{ form.abStiffnessMin }}</div>
            <div class="block">{{ form.abCwwStiffness }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">BC Stiffness</div>
            <div class="block">{{ form.bcStiffnessMax }}</div>
            <div class="block">{{ form.bcCwStiffness }}</div>
            <div class="block2" :class="form.bcResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.bcResult }}</div>
            <div class="block">{{ form.bcStiffnessMin }}</div>
            <div class="block">{{ form.bcCwwStiffness }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">CD Stiffness</div>
            <div class="block">{{ form.cdStiffnessMax }}</div>
            <div class="block">{{ form.cdCwStiffness }}</div>
            <div class="block2" :class="form.cdResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.cdResult }}</div>
            <div class="block">{{ form.cdStiffnessMin }}</div>
            <div class="block">{{ form.cdCwwStiffness }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">AD Stiffness</div>
            <div class="block">{{ form.adStiffnessMax }}</div>
            <div class="block">{{ form.adCwStiffness }}</div>
            <div class="block2" :class="form.adResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.adResult }}</div>
            <div class="block">{{ form.adStiffnessMin }}</div>
            <div class="block">{{ form.adCwwStiffness }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">BD Stiffness</div>
            <div class="block">{{ form.bdStiffnessMax }}</div>
            <div class="block">{{ form.bdCwStiffness }}</div>
            <div class="block2" :class="form.bdResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.bdResult }}</div>
            <div class="block">{{ form.bdStiffnessMin }}</div>
            <div class="block">{{ form.bdCwwStiffness }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="stiffnessOne">
        <el-col :span="5">
          <div class="grid">
            <div class="block1">AB Backlash</div>
            <div class="block">Max</div>
            <div class="block">{{ form.abClearanceMax }}</div>
            <div class="block">{{ form.abCwClearance }}</div>
            <div class="block2" :class="form.abResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.abResult }}</div>
            <div class="block">Min</div>
            <div class="block">{{ form.abClearanceMin }}</div>
            <div class="block">{{ form.abCwwClearance }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">BC Backlash</div>
            <div class="block">{{ form.bcClearanceMax }}</div>
            <div class="block">{{ form.bcCwClearance }}</div>
            <div class="block2" :class="form.bcResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.bcResult }}</div>
            <div class="block">{{ form.bcClearanceMin }}</div>
            <div class="block">{{ form.bcCwwClearance }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">CD Backlash</div>
            <div class="block">{{ form.cdClearanceMax }}</div>
            <div class="block">{{ form.cdCwClearance }}</div>
            <div class="block2" :class="form.cdResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.cdResult }}</div>
            <div class="block">{{ form.cdClearanceMin }}</div>
            <div class="block">{{ form.cdCwwClearance }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">AD Backlash</div>
            <div class="block">{{ form.adClearanceMax }}</div>
            <div class="block">{{ form.adCwClearance }}</div>
            <div class="block2" :class="form.adResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.adResult }}</div>
            <div class="block">{{ form.adClearanceMin }}</div>
            <div class="block">{{ form.adCwwClearance }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid2">
            <div class="block1Item">BD Backlash</div>
            <div class="block">{{ form.bdClearanceMax }}</div>
            <div class="block">{{ form.bdCwClearance }}</div>
            <div class="block2" :class="form.bdResult === 'OK' ? 'resultColor' : 'resultItemColor'">{{ form.bdResult }}</div>
            <div class="block">{{ form.bdClearanceMin }}</div>
            <div class="block">{{ form.bdCwwClearance }}</div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 分页器组件 -->
    <el-pagination @size-change="sizeChange" @current-change="getOperateInfo" v-model:current-page="requestParameters.pageNum" v-model:page-size="requestParameters.pageSize" :page-sizes="[10, 20, 50, 100]" :background="true" layout="prev,pager,next,jumper,->,sizes,total" :total="total" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
//存储时间
let time = ref<any>([]);
//产品状态的选择项
const options = [
  {
    value: 'Option1',
    label: 'OK',
  },
  {
    value: 'Option2',
    label: 'NG',
  },
];
//请求全部操作日志参数
let requestParameters = reactive<any>({
  username: '', //用户名
  productStatus: '', //产品状态
  productModel: '', //产品型号
  beginTime: '', //开始时间
  endingTime: '', //结束时间
  pageNum: 1, //当前页码
  pageSize: 10, // //每一页展示多少条数据
});
//存储已有运行日志数据总数
let total = ref<number>(0);
//存储已有操作日志的数据(Records定义了一个数组，右边括号里面的[]为初始化数组)
let runLogArr = ref<any>([]);
//组件挂载完毕，发请求获取全部的运行日志
onMounted(() => {
  getOperateInfo();
});
const getOperateInfo = async (pager = 1) => {
  requestParameters.pageNum = pager;

  // let result: any = await reqOperate(requestParameters);
  // if (result.code === 200) {
  //   total.value = result.data.total; //存储已有运行日志总个数
  //   runLogArr.value = result.data.records; //存储已有运行日志数据
  // }
};
//当下拉菜单发生变化的时候触发此方法
const sizeChange = () => {
  getOperateInfo();
};
//查询用户
const search = () => {
  requestParameters.beginTime = time.value[0];
  requestParameters.endingTime = time.value[1];
  //根据关键字获取相应的数据
  getOperateInfo();
  //清空数据
  requestParameters.username = '';
  time.value = '';
};

const dialogVisible = ref<boolean>(false); //弹出框的变量
const form = ref<any>();
//查看详情的弹出框
const handleDetail = (index, row) => {
  console.log('1234');

  dialogVisible.value = true;
  form.value = { ...row };
};
</script>
<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}

.demo-datetime-picker .block {
  text-align: center;
}

.line {
  width: 1px;
  background-color: var(--el-border-color);
}


.stiffnessOne {
  display: flex;
  justify-content: space-between;
	margin-top: 20px;

  .grid {
    border: 1px solid rgb(177, 175, 175);
    display: grid;
    height: 15vh;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    .block {
      border: 1px solid rgb(177, 175, 175);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }

    .block2 {
      grid-row: span 2;
      border: 1px solid rgb(177, 175, 175);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }

    .block1 {
      grid-column: span 4; 
      border: 1px solid rgb(177, 175, 175);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: #e1f3d8;
      font-size: 16px;
    }

    .resultColor {
      color: #67c23a;
      font-weight: bolder;
      font-size: 18px;
    }

    .resultItemColor {
      color: #f56c6c;
      font-weight: bolder;
      font-size: 18px;
    }
  }

  .grid2 {
    border: 1px solid rgb(177, 175, 175);
    display: grid;
    height: 15vh;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);

    .block {
      border: 1px solid rgb(177, 175, 175);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }

    .block2 {
      grid-row: span 2;
      border: 1px solid rgb(177, 175, 175);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }

    .block1Item {
      grid-column: span 3; 
      border: 1px solid rgb(177, 175, 175);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: #e1f3d8;
      font-size: 16px;
    }

    .resultColor {
      color: #67c23a;
      font-weight: bolder;
      font-size: 18px;
    }

    .resultItemColor {
      color: #f56c6c;
      font-weight: bolder;
      font-size: 18px;
    }
  }
}

</style>
